<template>
  <div class="already">
    <div class="top">
      <back></back>
      <div>我的关注</div>
    </div>
    <!-- 列表 -->
    <div class="list">
      <div class="opin" v-for="(item, i) in follows" :key="i">
        <div class="report">
          <img :src="`/${item.favatar}`" />
          <div class="march">
            <p class="art">{{ item.fname }}</p>
            <p class="fine">{{ item.fautograph }}</p>
          </div>
          <div>
            <button class="button" @click="follow(item.fuserid)">
              取消关注
            </button>
          </div>
        </div>
        <!-- 图片 -->
        <div class="zon">
          <div v-for="(image, i) in image[i]" :key="i + 1">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              :src="`/${image}`"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      follows: [],
      images: [],
      image: [],
    };
  },
  methods: {
    follow(fuserid) {
      this.axios.delete("/follow/del/" + fuserid).then((result) => {
        if (result.data.msg == "ok") {
          Toast.success("取消关注成功");
          this.showfollow();
        }
      });
    },
    showfollow() {
      this.axios.get("/follow/follow/" + this.uid).then((result) => {
        this.follows = result.data.data;
        if (this.follows) {
          this.follows.forEach((item) => {
            if (item.fimage) {
              this.images = item.fimage.split(",");
              this.image.push(this.images);
            }
          });
        }
      });
    },
  },
  mounted() {
    this.showfollow();
  },
};
</script>

<style>
.already .top {
  width: 100%;
  position: fixed;
  top: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 60px;
  z-index: 99;
  background-color: #fdfdfd;
  border-bottom: 1px solid #eee;
}
.already .list {
  padding-top: 70px;
}
.already .opin {
  width: 90%;
  padding: 20px 0;
  margin: 0 auto;
  border-bottom: 1px dotted #ddd;
}
.already .report {
  display: flex;
  align-items: center;
}
.already .report img {
  width: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
.already .march {
  display: inline-block;
}
.already .art {
  font-size: 18px;
  text-align: left;
}
.already .fine {
  color: #999;
  margin-top: 10px;
  text-align: left;
}
/* 图片 */
.already .zon {
  margin: 0 auto;
  width: 90%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.already .zon > div {
  width: 32%;
  height: 100px;
  border-radius: 10px;
  margin-top: 10px;
  background-image: linear-gradient(yellow, green);
}
.already .van-image > img {
  border-radius: 10px;
}
.already .button {
  width: 70px;
  height: 30px;
  border: 0;
  margin-left: 10px;
  border-radius: 30px;
  color: #007bff;
  font-size: 12px;
}
</style>
